<template>
	<div class="policy" id="policy">
		<div class="st_t1">
			安全策略
		</div>
		<div class="info_title">
			<h1 class="st_t1 ul_title">您当前安全状态</h1>
			<ul class="policy_ul">
				<li>
					<img src="../../../static/imgs/security_phone.png" />
					<div class="ul_type">
						<p>手机</p>
						<p>1**********<span>修改</span></p>
					</div>
				</li>
				<li>
					<img src="../../../static/imgs/security_phone.png" />
					<div class="ul_type">
						<p>谷歌验证器</p>
						<p class="set_color">设置</p>
					</div>
				</li>
				<li>
					<img src="../../../static/imgs/security_phone.png" />
					<div class="ul_type">
						<p>资金密码</p>
						<p class="set_color">设置</p>
					</div>
				</li>
			</ul>
			<div class="st_d1">
				<h1 class="st_t1 ul_title">账户安全策略</h1>
				<ul class="setting_ul">
					<li>
						<div class="icon"><img src="../../../static/imgs/security_phone.png" /></div>
						<div>
							<span>
								登录验证
							</span>
						</div>
						<div>
							<span class="intro">登录交易所的验证方法</span>
						</div>
						<div>
							<span class="intro_color">验证密码</span>
						</div>
						<div class="operation">
							<button>
								更改
							</button>
						</div>
					</li>
					<li>
						<div class="icon"><img src="../../../static/imgs/security_phone.png" /></div>
						<div>
							<span>
								修改设置验证
							</span>
						</div>
						<div>
							<span class="intro">更改安全中心的各项设置</span>
						</div>
						<div>
							<span class="intro_color">Google验证码+短信验证码</span>
						</div>
						<div class="operation">
							<button>
								更改
							</button>
						</div>
					</li>
				</ul>
			</div>
			
			<div class="st_d1">
				<h1 class="st_t1 ul_title">资金安全策略</h1>
				<ul class="setting_ul">
					<li>
						<div class="icon"><img src="../../../static/imgs/security_phone.png" /></div>
						<div>
							<span>
								交易验证
							</span>
						</div>
						<div>
							<span class="intro">进行人民币现货交易、美元现货交易时</span>
						</div>
						<div>
							<span class="intro_color">不验证资金密码</span>
						</div>
						<div class="operation">
							<button>
								更改
							</button>
						</div>
					</li>
					<li>
						<div class="icon"><img src="../../../static/imgs/security_phone.png" /></div>
						<div>
							<span>
								提现验证
							</span>
						</div>
						<div>
							<span class="intro">进行各种提现操作时</span>
						</div>
						<div class="operation">
							<button class="jinzhi">
								未启用
							</button>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'policy',
		computed: {},
		data() {
			return {
				title: '',
			}
		}, //定义变量
		components: {}, //注册组件
		methods: { //方法都在这里
		},
		mounted() {
			var that = this;
			//获取banner
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	.policy {
		text-align: left;
		.st_t1 {
			padding: 15px 20px;
			background: #f4f4f4;
			width: 100%;
			text-align: left;
			font-size: 24px;
			margin-bottom:20px;
		}
		.info_title{
			padding:20px 30px;
			border:1px solid #ededed;
			.ul_title{
				background:none;
				font-weight: normal;
				padding-left:0;
				color:#333;
				font-size:20px;
				margin:0;
			}
			.policy_ul{
				overflow: hidden;
				zoom: 1;
				margin:20px 0;
				li{
					float: left;
					width:260px;
					img{
						width:40px;
						float: left;
						margin-right:30px
					}
					.ul_type{
						font-size:12px;
						line-height: 20px;
						span{
							color:#0093f1;
							margin-left:10px;
						}
						.set_color{
							color:#0093f1;
						}
					}
				}
			}
		}
		.st_d1 {
			overflow: auto;
			padding:20px 0px 0;
			.ul_title{
				background:none;
				font-weight: normal;
				padding-left:0;
				color:#333;
				font-size:20px;
			}
		}
		.setting_ul {
			overflow: auto;
			li {
				font-size: 14px;
				overflow: auto;
				border: 1px solid #ededed;
				display: table;
				height: 100px;
				width: 100%;
				margin-bottom: 20px;
				>div {
					display: table-cell;
					vertical-align: middle;
				}
				.icon {
					padding-left: 40px;
					width: 175px;
					>img {
						width: 60px;
					}
				}
				.operation {
					padding-right: 20px;
					text-align: right;
					button {
						width: 82px;
						background-color: #0093f1;
						height: 37px;
						border: none;
						color: white;
						font-size: 14px;
					}
					.jinzhi{
						background:none;
						color:#A3A1A1;
					}
				}
				.intro{
					color:#a3a1a1;
				}
				.intro_color{
					color:#f35809;
				}
			}
			li:hover{
				border: 1px solid #0093f1;
			}
		}
	}
</style>